import { useEffect, useState } from 'react'
import './App.css'
import { Tabs,InfiniteScroll, Button  } from 'antd-mobile'
import axios from 'axios'

function App() {

  
  let arr=[
    {
      sj:'06:27',
      df:'上海虹桥',
      zuo:'二等有票'
    },
    {
      sj:'G104',
      df:'6小时45分',
      zuo:'一等有票'
    },
    {
      sj:'13:12',
      df:'北京南',
      zuo:'商务8张'
    },
  ]

  let [inp,setInp]=useState([])
  let [pageCode,setPageCode]=useState(1)
  //渲染数据
  const FeatchList=async()=>{
    let res=await axios.get('/api/room/list',{params:{pageCode}})
    console.log('res',res)
    let newData=res.data.data.list
    setInp([...inp,...newData])
    setPageCode(pageCode+1)
  }
  // useEffect(()=>{
  //   FeatchList()
  // },[])

  let [wz,setWz]=useState('城市')
  const cs=()=>{
    setWz('上海虹桥')
  }
  const cs2=()=>{
    setWz('上海')
  }
  const cs3=()=>{
    setWz('上海松江')
  }

  return (
    <div>
      <p>{wz}</p>
      <p> <Button onClick={cs}>上海虹桥</Button><Button onClick={cs2}>上海</Button><Button onClick={cs3}>上海松江</Button> </p>
      
     
      <Tabs>
        <Tabs.Tab title='直达' key='1'>
          <div style={{display:'flex'}}>
            {
              arr&&arr.map((item,index)=>{
                return <div style={{marginLeft:"30px"}}>
                  <h3>{item.sj}</h3>
                  <p>{item.df}</p>
                  <p>{item.zuo}</p>
                </div>
              })
            }
          </div>
          <div style={{display:'flex'}}>
            {
              arr&&arr.map((item,index)=>{
                return <div style={{marginLeft:"30px"}}>
                  <h3>{item.sj}</h3>
                  <p>{item.df}</p>
                  <p>{item.zuo}</p>
                </div>
              })
            }
          </div>
          <div style={{display:'flex'}}>
            {
              arr&&arr.map((item,index)=>{
                return <div style={{marginLeft:"30px"}}>
                  <h3>{item.sj}</h3>
                  <p>{item.df}</p>
                  <p>{item.zuo}</p>
                </div>
              })
            }
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='机票' key='2'>
          {
            inp&&inp.map((item,index)=>(
              <dl>
                <dt>
                  <h4>{item.name}</h4>
                </dt>
                <dd>
                  <p>{item.title}</p>
                  <p>{item.person}</p>
                </dd>
              </dl>
            ))
          }
        </Tabs.Tab>
        <Tabs.Tab title='汽车票' key='3'>
          蚂蚁
        </Tabs.Tab>
        <Tabs.Tab title='中转' key='4'>
          蚂蚁
        </Tabs.Tab>
      </Tabs>
      <InfiniteScroll loadMore={FeatchList} hasMore={true} />
    </div>
  )
}

export default App
